<template>
  <a-modal v-model:visible="visible" :title="modalTitle" width="35%" @ok="handleOk" @cancel="handleCancel">
    <a-form :model="formState" ref="formRef" :label-col="{ span: 5 }">
      <a-form-item label="名称" name="name" :rules="[{ required: true, message: '请输入客服名称' }]">
        <a-input v-model:value="formState.name" placeholder="请输入客服名称" />
      </a-form-item>
      <a-form-item label="二维码" name="img" :rules="[{ required: true, message: '请选择' }]">
        <a-form-item-rest>
          <app-upload :fileList="formState.img" :min="1" @upload-img="uploadImg" />
        </a-form-item-rest>
      </a-form-item>
      <a-form-item label="用户" name="user_id" :rules="[{ required: true, message: '请选择用户' }]">
        <a-select v-model:value="formState.user_id" show-search
          :getPopupContainer="(triggerNode) => triggerNode.parentNode" placeholder="请选择用户" allowClear
          :filterOption="filterOption">
          <a-select-option v-for="(item, index) in state.options" :value="item.user_id" :label="item.nickname"
            :key="index" :disabled="item.is_contact == 1">{{ item.nickname }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
import useModal from "@/utils/useModal";
import { reactive, ref } from "vue";
import { message } from "ant-design-vue";
import { add, edit, info } from "@/api/contact";
import { list } from "@/api/user";

const { visible, modalTitle } = useModal();

const emits = defineEmits(["model-success"]);
const formRef = ref();

const formState = reactive({
  name: "",
  img: [],
  user_id: null,
});
const state = reactive({
  options: [],
});
const show = (model) => {
  visible.value = true;
  modalTitle.value = model ? "编辑客服" : "新增客服";
  getUserAllList();
  if (model && model.contact_id) {
    getDetails(model);
  } else {
    resetForm({
      contact_id: null
    })
  }
};
const getUserAllList = () => {
  list().then((res) => {
    if (res.code == 0) {
      const data = res.data;
      state.options = data.data;
    }
  });
};
const getDetails = (data) => {
  info({
    id: data.contact_id,
  }).then((res) => {
    if (res.code === 0) {
      const data = res.data;
      resetForm(data);
      formState.img = formState.img
        ? [
          {
            url: formState.img,
          },
        ]
        : [];
    }
  });
};
//下拉框搜索
const filterOption = (input, option) => {
  //select有label这个字段
  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
//设置表单的值
const resetForm = function (values) {
  for (var i in values) {
    formState[i] = values[i];
  }
};
const uploadImg = (val) => {
  formState.img = formState.img.concat(val);
};
// 保存
const handleOk = async () => {
  await formRef.value.validate().then(() => {
    const params = {
      ...formState,
      img: formState.img.length > 0 ? formState.img[0]?.url : "",
    };
    if (formState.contact_id) {
      edit({
        id: formState.contact_id,
        ...params,
      }).then(function (res) {
        if (res.code == 0) {
          message.success(res.msg);
          formRef.value.resetFields();
          visible.value = false;
          emits("model-success");
        }
      });
    } else {
      //添加
      add({ ...params }).then(function (res) {
        if (res.code == 0) {
          message.success(res.msg);
          formRef.value.resetFields();
          visible.value = false;
          emits("model-success");
        }
      });
    }
  });
};
const handleCancel = () => {
  formRef.value.resetFields();
};
defineExpose({
  show,
});
</script>